<template>
  <div class="trolley">
    <!-- <span>购物车</span> -->
    <p>count模块:</p>
    <!-- $store是挂载在vue原型上的实例, 下的state(数据源)下的count(模块名) 下的(模块) -->
    <!-- 获取state的原始写法 -->
    <!-- <span>{{$store.state.count.count}}</span> -->
    <!-- 借助mapState后有模块就 模块名.属性, 没有就直接用 属性即可 -->
    <span>{{count.count}}</span>
    <!-- 老写法: @click="$store.commit('add', 2)" -->
    <button type="button" name="button" @click="increment(2)">增加</button>
    <button type="button" name="button" @click="decrement">删减</button>
    <home-bar></home-bar>
    <span>过滤后的列表: {{filterList}}</span>
    <span>列表长度: {{listCount}}</span>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters } from "vuex";
import HomeBar from "@c/tab-bar/tab-bar";
export default {
  name: "TrolleyPage",
  components: {
    HomeBar
  },
  props: {},
  data() {
    return {};
  },
  computed: {
    //mapState可以获取到当前的状态, 就不用写$store.state.count.count这一行了
    ...mapState(["count"]),
    ...mapGetters("count", ["filterList", "listCount"])
    // ...mapGetters("count", ["doneTodosCount"])
    /* doneTodosCount() {
       return this.$store.count.getters.doneTodosCount;
     }*/
    //  count(){
    //     return this.$store.getters.count;
    //  }
  },
  methods: {
    //辅助函数写法(将this.$store.dispatch映射为数组)
    //多个模块时候, 第一个参数为传入的模块名, 后面数组为模块内的内容
    ...mapActions("count", ["increment", "decrement"])
    //methods: mapActions("count", ["increment", "decrement"])
    //传统写法
    /*  dispatch, 做vuex传递过来的分发事件,例如increment和decrement事件
    add() {
      this.$store.dispatch("increment");
    },
    remove() {
      this.$store.dispatch("decrement");
    }*/
  }
};
</script>
<style lang="scss" scoped>
.trolley span{
  font-size: 20px;
  display: block;
  padding: 10px 0;
}
</style>